<template>
  <div class="store-management">
    <!-- 店铺基本信息 -->
    <div class="section-card">
      <div class="section-header">
        <h3>店铺基本信息</h3>
        <el-button type="primary" @click="editMode = !editMode">
          {{ editMode ? '取消编辑' : '编辑信息' }}
        </el-button>
      </div>
      
      <el-form
        ref="storeFormRef"
        :model="storeInfo"
        :rules="storeRules"
        label-width="120px"
        :disabled="!editMode"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="店铺名称" prop="name">
              <el-input v-model="storeInfo.name" placeholder="请输入店铺名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="storeInfo.phone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="店铺类型" prop="category">
              <el-select v-model="storeInfo.category" placeholder="请选择店铺类型">
                <el-option label="中餐" value="chinese" />
                <el-option label="西餐" value="western" />
                <el-option label="快餐" value="fastfood" />
                <el-option label="火锅" value="hotpot" />
                <el-option label="烧烤" value="bbq" />
                <el-option label="甜品" value="dessert" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人均消费" prop="avgPrice">
              <el-input-number
                v-model="storeInfo.avgPrice"
                :min="0"
                :precision="0"
                controls-position="right"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="店铺地址" prop="address">
          <el-input v-model="storeInfo.address" placeholder="请输入详细地址" />
        </el-form-item>
        
        <el-form-item label="店铺描述" prop="description">
          <el-input
            v-model="storeInfo.description"
            type="textarea"
            :rows="3"
            placeholder="请输入店铺描述"
          />
        </el-form-item>
        
        <el-form-item label="店铺图片">
          <el-upload
            class="store-uploader"
            action="#"
            :show-file-list="false"
            :before-upload="beforeUpload"
            :disabled="!editMode"
          >
            <img v-if="storeInfo.image" :src="storeInfo.image" class="store-image" />
            <el-icon v-else class="store-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        
        <el-form-item v-if="editMode">
          <el-button type="primary" @click="saveStoreInfo" :loading="saving">
            保存修改
          </el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 营业设置 -->
    <div class="section-card">
      <div class="section-header">
        <h3>营业设置</h3>
        <el-switch
          v-model="businessStatus"
          active-text="营业中"
          inactive-text="休息中"
          @change="toggleBusinessStatus"
        />
      </div>
      
      <el-form label-width="120px">
        <el-form-item label="营业时间">
          <div class="business-hours">
            <div v-for="(day, index) in businessHours" :key="index" class="day-hours">
              <span class="day-name">{{ day.name }}</span>
              <el-switch v-model="day.enabled" @change="updateBusinessHours" />
              <el-time-picker
                v-model="day.startTime"
                placeholder="开始时间"
                format="HH:mm"
                value-format="HH:mm"
                :disabled="!day.enabled"
                @change="updateBusinessHours"
              />
              <span class="time-separator">至</span>
              <el-time-picker
                v-model="day.endTime"
                placeholder="结束时间"
                format="HH:mm"
                value-format="HH:mm"
                :disabled="!day.enabled"
                @change="updateBusinessHours"
              />
            </div>
          </div>
        </el-form-item>
        
        <el-form-item label="配送设置">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="配送费">
                <el-input-number
                  v-model="deliverySettings.fee"
                  :min="0"
                  :precision="1"
                  controls-position="right"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="起送金额">
                <el-input-number
                  v-model="deliverySettings.minAmount"
                  :min="0"
                  :precision="1"
                  controls-position="right"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="配送范围(km)">
                <el-input-number
                  v-model="deliverySettings.range"
                  :min="0"
                  :precision="1"
                  controls-position="right"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>

    <!-- 店铺统计 -->
    <div class="section-card">
      <div class="section-header">
        <h3>店铺统计</h3>
      </div>
      
      <el-row :gutter="20">
        <el-col :span="6" v-for="stat in storeStats" :key="stat.label">
          <div class="stat-item">
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()
const storeFormRef = ref()
const editMode = ref(false)
const saving = ref(false)
const businessStatus = ref(true)

// 店铺信息
const storeInfo = reactive({
  name: '美味餐厅',
  phone: '13800138000',
  category: 'chinese',
  avgPrice: 50,
  address: '北京市朝阳区三里屯街道工体北路8号',
  description: '正宗川菜，麻辣鲜香，欢迎品尝！',
  image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
})

// 表单验证规则
const storeRules = {
  name: [
    { required: true, message: '请输入店铺名称', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  category: [
    { required: true, message: '请选择店铺类型', trigger: 'change' }
  ],
  address: [
    { required: true, message: '请输入店铺地址', trigger: 'blur' }
  ]
}

// 营业时间
const businessHours = ref([
  { name: '周一', enabled: true, startTime: '09:00', endTime: '22:00' },
  { name: '周二', enabled: true, startTime: '09:00', endTime: '22:00' },
  { name: '周三', enabled: true, startTime: '09:00', endTime: '22:00' },
  { name: '周四', enabled: true, startTime: '09:00', endTime: '22:00' },
  { name: '周五', enabled: true, startTime: '09:00', endTime: '22:00' },
  { name: '周六', enabled: true, startTime: '09:00', endTime: '23:00' },
  { name: '周日', enabled: true, startTime: '09:00', endTime: '23:00' }
])

// 配送设置
const deliverySettings = reactive({
  fee: 5.0,
  minAmount: 20.0,
  range: 3.0
})

// 店铺统计
const storeStats = ref([
  { label: '总订单数', value: '1,234' },
  { label: '总销售额', value: '¥45,678' },
  { label: '客户评分', value: '4.8' },
  { label: '关注人数', value: '567' }
])

const beforeUpload = (file) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG) {
    ElMessage.error('上传图片只能是 JPG/PNG 格式!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('上传图片大小不能超过 2MB!')
    return false
  }
  
  // 模拟上传
  const reader = new FileReader()
  reader.onload = (e) => {
    storeInfo.image = e.target.result
  }
  reader.readAsDataURL(file)
  
  return false // 阻止自动上传
}

const saveStoreInfo = async () => {
  if (!storeFormRef.value) return
  
  try {
    await storeFormRef.value.validate()
    saving.value = true
    
    // 模拟保存API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    ElMessage.success('店铺信息保存成功')
    editMode.value = false
  } catch (error) {
    console.error('保存失败:', error)
  } finally {
    saving.value = false
  }
}

const resetForm = () => {
  if (storeFormRef.value) {
    storeFormRef.value.resetFields()
  }
}

const toggleBusinessStatus = (status) => {
  ElMessage.success(status ? '店铺已开始营业' : '店铺已暂停营业')
}

const updateBusinessHours = () => {
  ElMessage.success('营业时间已更新')
}

onMounted(() => {
  // 加载店铺信息
  console.log('Store management mounted')
})
</script>

<style lang="scss" scoped>
.store-management {
  .section-card {
    background: white;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid #ebeef5;
      
      h3 {
        margin: 0;
        color: #303133;
        font-size: 18px;
        font-weight: 600;
      }
    }
  }
  
  .store-uploader {
    .store-image {
      width: 148px;
      height: 148px;
      object-fit: cover;
      border-radius: 6px;
    }
    
    :deep(.el-upload) {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: 0.2s;
      
      &:hover {
        border-color: #409eff;
      }
    }
    
    .store-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 148px;
      height: 148px;
      text-align: center;
      line-height: 148px;
    }
  }
  
  .business-hours {
    .day-hours {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      gap: 12px;
      
      .day-name {
        width: 40px;
        font-weight: 500;
      }
      
      .time-separator {
        color: #909399;
      }
    }
  }
  
  .stat-item {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    
    .stat-value {
      font-size: 24px;
      font-weight: 600;
      color: #409eff;
      margin-bottom: 8px;
    }
    
    .stat-label {
      font-size: 14px;
      color: #606266;
    }
  }
}
</style> 